<template>
    <view class="page_box">
        <view class="margin_bottom_140">
            <view class="container_box ">
                <view class="title">选择孩子</view>
                <scroll-view class="children_box "
                             :scroll-left='scleft'
                             scroll-with-animation
                             show-scrollbar="false"
                             scroll-x>
                    <view class="u-flex u-row-between">
                        <view class="children_item u-flex-col u-row-center u-col-center"
                              :class="{'select': currentItemIndex == index }"
                              @click="itemClick(item, index)"
                              v-for="(item, index) in childrenList"
                              :key="index">
                            <image class="children_img"
                                   :src="!item.gender ? '/static/images/mine/coommon_icon_boy01@2x.png':'/static/images/mine/coommon_icon_girl01@2x.png'"
                                   mode="" />
                            <view class="children_name u-line-1">{{ item.childrenName }}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            <view class="container_box">
                <view class="title">请假时间</view>
                <view class="curriculum_box"
                      @click="calendarShow=!calendarShow">
                    <view class="curriculum_item"
                          :class="{'select': calendarResult != '请选择请假日期' }">{{ calendarResult }}</view>
                </view>
                <!-- min-date  max-date -->
                <u-calendar v-model="calendarShow"
                            mode="date"
                            :min-date="$utils.getNowFormatDate()"
                            :max-date="$utils.getTime(-13)"
                            safe-area-inset-bottom
                            @change="changeCalendar"></u-calendar>
            </view>
            <view class="container_box">
                <view class="title">请假课程</view>
                <view class="curriculum_box u-flex u-flex-wrap ">
                    <!--  v-for="(item, index) in studentCurriculumList"
                      :key="index" -->
                    <view class="curriculum_item u-line-1"
                          style="max-width:50%;"
                          :class="{'select': currentCurriculumItemData.productResp.name != '请先选择请假日期' }">{{ currentCurriculumItemData.productResp.name }}</view>
                </view>
            </view>

            <view class="container_box">
                <view class="title">请假理由</view>
                <view class="content_box">
                    <textarea :maxlength="200"
                              value=""
                              v-model="leaveContent"
                              placeholder="请输入请假理由,200字以内" />
                </view>

            </view>
        </view>
        <view style="height: 1px;"></view>
        <div class="footer_box safe-area-inset-bottom u-flex u-row-between">
            <u-button class="btn_box"
                      :disabled="!currentCurriculumItemData.id"
                      @click="leaveBtnClick()"
                      type="primary"
                      :ripple="true"
                      shape="circle">{{ '我要请假' }}</u-button>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            childrenList: [],
            scleft: 0,
            currentItemIndex: 0,
            currentItemData: {},
            // currentCurriculumIndex: 0,
            currentCurriculumItemData: { productResp: { name: '请先选择请假日期' } },
            // studentCurriculumList: [],
            calendarShow: false,
            leaveContent: '',
            calendarResult: '请选择请假日期'
        }
    },
    watch: {
        calendarResult(newV) {
            if (newV != '请选择请假日期') {
                this.getStudentClassPage()
            }
        },
        currentItemIndex(newV) {
            this.calendarResult = '请选择请假日期'
            this.currentCurriculumItemData = { productResp: { name: '请先选择请假日期' } }
        },
    },
    onLoad() {
        this.getChildren()
    },
    onShow() {
    },
    methods: {
        // 获取孩子列表
        getChildren() {
            this.$api.getChildren({}, (res) => {
                if (res.code == 0 && res.data.length != 0) {
                    this.currentItemData = res.data[0]
                    this.childrenList = res.data
                }
            });
        },
        itemClick(item, index) {
            if (index > 1) {
                this.scleft = index * this.$systemInfo.windowWidth * (200 / 750)
            } else {
                this.scleft = '0'
            }
            this.currentItemData = item
            this.currentItemIndex = index
        },
        // 获取已报名课程列表
        getStudentClassPage() {
            this.$api.studentCurrent({ id: this.currentItemData.childrenId, addTime: this.calendarResult + ' 23:59:59' }, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.currentCurriculumItemData = res.data
                }
            });
        },
        changeCalendar(e) {
            console.log('>>>>>>>>>>>>>>>>', e)
            this.calendarResult = e.result
        },
        leaveBtnClick() {
            let data = {
                childId: this.currentItemData.childrenId,
                classScheduleId: this.currentCurriculumItemData.id,
                content: this.leaveContent,
                leaveTime: this.calendarResult + ' 23:59:59'
            }
            this.$api.applyLeave(data, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.$interactive.toast('已提交请假申请，等待审批', 1500)
                    setTimeout(() => {
                        this.$goto('back')
                    }, 2000);
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.page_box {
    background-color: #fff;
}
.padding_box {
    padding: 30rpx;
}
// .container_box + .container_box {
//     margin-top: 30rpx;
// }
.title {
    font-weight: bold;
    font-size: 36rpx;
    color: #333;
    margin-bottom: 30rpx;
}
.children_box {
    box-sizing: border-box;
    color: #1b1b22;
    // margin-bottom: 30rpx;
    // padding-right: 30rpx;
    // white-space: nowrap;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .children_item {
        position: relative;
        flex-shrink: 0;
        width: 200rpx;
        height: 200rpx;
        background-color: #f5f5f5;
        padding: 30rpx;
        margin-right: 30rpx;
        border-radius: 32rpx;
        font-size: 28rpx;
        border: 4rpx solid #f5f5f5;
        &.select {
            border: 4rpx solid #63b9f2;
        }
        .children_img {
            width: 96rpx;
            height: 96rpx;
        }
        .children_name {
            font-size: 36rpx;
            max-width: 140rpx;
        }
    }
}
.btn_box {
    width: 100%;
}
.curriculum_box {
    font-size: 28rpx;
    .curriculum_item {
        max-width: 40%;
        padding: 16rpx 32rpx;
        text-align: center;
        background: #f5f5f5;
        border-radius: 16rpx;
        border: 2rpx solid #f5f5f5;
        // margin: 0 2.3% 30rpx 0;
        &.select {
            color: #63b9f2;
            background: #f0f9ff;
            border: 2rpx solid #63b9f2;
        }
    }
}
.content_box {
    height: 300rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    padding: 32rpx;
    color: #999;
    background: #f5f5f5;
    border-radius: 16rpx;
    textarea {
        width: 100%;
        height: 100%;
    }
}
</style>
